<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
</head>
<body>
<div id="app">
<!--  组件在使用的时候才会被实例化，也就是VueComponent的实例-->
  <Teacher></Teacher>
  <Student></Student>
</div>
<script>
  Vue.config.productionTip = false
  //Vue.extend创建组件会返回一个VueComponent构造函数，当组件被注册并使用时会实例化得到一个组件实例
  const Teacher = Vue.extend({
    template:`
            <div>
                <h2>Teacher组件</h2>
                <button>Teacher按钮</button>
            </div>
        `
  })
  // console.log(Teacher,'Teacher')
  const Student = Vue.extend({
    template:`
            <div>
                <h2>Student组件</h2>
                <button @click="show">Student按钮</button>
            </div>
        `,
    methods:{
      show(){
        console.log(this,'Student')//VueComponent
        console.log(this.__proto__,'this.__proto__')//VueComponent.__proto__
        console.log(this.__proto__.__proto__,'this.__proto__.__proto__')//Vue.prototype
        console.log(this.__proto__.__proto__.__proto__,'this.__proto__.__proto__.__proto__')
        console.log(this.__proto__.__proto__.__proto__.__proto__,'this.__proto__.__proto__.__proto__.__proto__')
      }
    }
  })
  // console.log(Student,'Student')

  //Student组件与Teacher组件都是VueComponent构造函数
  // console.log(Student===Teacher)//false


  const vm = new Vue({
    el: '#app',
    data() {
      return {

      }
    },
    components:{
      Teacher,
      Student
    }
  })
</script>
</body>
</html>